<template>
  <template v-for="menu in props.list">
    <template v-if="!menu.children">
      <a-menu-item
        :key="menu.name"
        v-if="menu.role === undefined || userStore.userInfo.role === menu.role"
      >
        <template #icon>
          <j-component :is="menu.icon" />
        </template>
        {{ menu.title }}
      </a-menu-item>
    </template>

    <template v-else>
      <a-sub-menu
        :title="menu.title"
        :key="menu.name"
        v-if="menu.role === undefined || userStore.userInfo.role === menu.role"
      >
        <template #icon>
          <j-component :is="menu.icon" />
        </template>

        <j-menuitem :list="menu.children"></j-menuitem>
      </a-sub-menu>
    </template>
  </template>
</template>

<script lang="ts" setup>
import { reactive, ref, type Component } from "vue";
import { userStorer } from "@/stores/user";
import jMenuitem from "@/components/admin/menu/menuitem/index.vue";
import jComponent from "@/components/admin/menu/component/index.vue";

import type { MenuItem, Props } from "./index";
const userStore = userStorer();

const props = defineProps<Props>();
</script>
<style scoped lang="less"></style>
